<template>
  <!--<a-button>CME</a-button>-->
  <!--<a-button>CSOM</a-button>-->
  <!--<a-button>EACH</a-button>-->
  <!--<a-button>IC</a-button>-->
  <!--<a-button>NE</a-button>-->
  <!--<a-button>OE</a-button>-->
  <!--<a-button>SOM</a-button>-->
  <!--<a-button>TMC</a-button>-->
  <!--<a-button>OM</a-button>-->
    <div style="width: 500px;height: 500px;background-color: gray">
        <a-button @click="change1">1</a-button>
        <a-button @click="change2">2</a-button>
        <a-button @click="change3">3</a-button>

        <svg class="processCircle" :width="width" :height="height" v-show="false">
            <circle :cx="width/2" :cy="height/2" :r="width/2-10" fill="none" stroke="#4470a3" stroke-width="15"
            >
            </circle>
            <!--        填充圆-->
            <circle :cx="width/2" :cy="height/2" :r="width/2-10" fill="none" stroke="#00f6ff" stroke-width="15"
                    :stroke-dasharray="st" stroke-linecap="round"
            >
            </circle>
        </svg>
        <div id="main" style="width: 250px;height: 200px">

        </div>
    </div>
</template>

<script>
import {message} from "ant-design-vue";
import {getAction, postAction, postActionWithHeader} from "@/manage";
import axios from "axios";
import API_BASE_URL from "../../config";
import {getCpuInfo} from "@/init";
import * as echarts from "echarts";
import store from "@/store";

export default {
    name: "testBtn",
    props: {
        width: {
            type: String,
            required: true,
            default: "140"
        },
        height: {
            type: String,
            required: true,
            default: "140"
        }
    },
    data() {
        return {
            res: [],
            // 半圆满进度值
            processPercent: '252px',
            show: true,
            value: '100%',
            st: '1 376',
            st1: 0,
            offset: '790px',
            offset1: 790,
            d: "",
            url: {
                userList: "http://api.cgi-gz.com/store-testing-users?page=1&per_page=10&key=18735696325",
                loginUser: 'http://api.cgi-gz.com/login-store/with-password',
                deviceLogin: 'http://api.cgi-gz.com/login-store/with-serial',
                getPic: `${API_BASE_URL}/gen-pic`,
                reconize:"http://api.cgi-gz.com/store-testing-report"
            },
            imgStyle: {opacity: 1},
            param:null,
            formData:null
        }
    },
    created() {
        let a = (2 * Math.PI) * (this.width / 2 - 10)
        this.st = '0 ' + a

    },
    methods: {
        async change1() {
            let param1 = {
                "age": "10后", //年龄
                "gender": "man", //性别
                "serial": "2cb962ac5",//设备序列号
                "testing_user_id": 1092//检测人id
            }
            let imgs = {}
            for (let i = 1; i <= 3; i++) {
                //由于await关键字的使用，它会在每次循环中等待异步操作完成后再继续下一次循环。
                await getAction(this.url.getPic).then((res) => {
                    // console.log(img.image_url)
                    let key = 'img' + i
                    imgs[key] =`${API_BASE_URL}`+ (res.data.data.image_url).slice(21)
                })
            }
            param1 = Object.assign(param1, imgs)
            this.param = param1

            let formData = new FormData();
            formData.append("age", "10后")
            formData.append("gender", "man")
            formData.append("serial", "2cb962ac5")
            formData.append("test_user_id", 1142)
            formData.append("question_code", [1,4,5])

            await fetch(param1['img1']).then(res => res.blob()).then(blob => {
                formData.append('img1', blob);
            })
            await fetch(param1['img2']).then(res => res.blob()).then(blob => {
                formData.append('img2', blob);
            })
            await fetch(param1['img3']).then(res => res.blob()).then(blob => {
                formData.append('img3', blob);
            })
            for (let i of formData.entries()){
                console.log(i)
            }
            this.formData = formData

            console.log(param1)
        },
        async change2() {
            let formData = this.formData

            await fetch(this.url.reconize, {
                method: 'POST',
                body: formData,
                headers: {
                    'Authorization': "N0M1PzB74StimOArhA8nNoZyO0XCnPPMwISX032L5Od74GC9Ko"
                }
            }).then(res => {
                console.log(res.json())
            }).catch(err => {
                console.log(err)
            })
        },
        change3() {
            let myChart  = echarts.init(document.getElementById('main'))
            console.log(myChart)
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                legend: {
                    data: ['销量']
                },
                xAxis: {
                    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                },
                yAxis: {},
                series: [
                    {
                        name: '销量',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20]
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

        },

    },
    watch: {
        res(newValue) {
            this.show = false
            if (true) {
                this.$nextTick(() => {
                    this.show = true
                })
            }
        }
    },
    mounted() {

    }
}
</script>

<style scoped>
img {
    opacity: 1;
    width: 300px;
}

.processCircle {
    transform: rotate(-90deg);
}

.div1 {
    width: 600px;
    height: 600px;
    background-color: #01f2fe;
    border-radius: 50%;
    position: absolute;
    left: 300px;
    top: 0px;
}
</style>